<template>
    <el-button type="primary"  plain @click="dialogFormVisible = true">
        新增
    </el-button>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="编号" width="80" />
        <el-table-column prop="MenuName" label="菜单名称" width="100" />
        <el-table-column prop="Url" label="菜单Url" width="180" />
        <el-table-column prop="ParentName" label="父级菜单名称" width="110" />
        <el-table-column prop="CreateName" label="创建人" width="110">
            <template v-slot="scope">
                <span v-if="!scope.row.CreateName">---</span>
                <span v-else>{{ scope.row.CreateName }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="CreateDate" label="创建日期" width="180">
            <template v-slot="scope">
                <span>{{ moment(scope.row.CreateDate).format("YYYY-MM-DD HH:mm:ss") }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="UpdateName" label="修改人" width="110">
            <template v-slot="scope">
                <span v-if="!scope.row.UpdateName">---</span>
                <span v-else>{{ scope.row.UpdateName }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="UpdateDate" label="修改日期" width="180">
            <template v-slot="scope">
                <span v-if="!scope.row.UpdateDate">---</span>
                <span v-else>{{ moment(scope.row.UpdateDate).format("YYYY-MM-DD HH:mm:ss") }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template v-slot="scope">
                <el-button @click="DelMenu(scope.row.Id)" type="primary" plain>删除</el-button>
                <el-button @click="UpdMenu(scope.row)" type="success" plain>编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="dialogFormVisible" title="新增" width="800">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="父级菜单">
                <el-cascader :options="parent" @change="End" :props="props1" clearable />
            </el-form-item>
            <el-form-item label="菜单名称" prop="MenuName">
                <el-input v-model="ruleForm.MenuName" />
            </el-form-item>
            <el-form-item label="跳转的Url地址" prop="Url">
                <el-input v-model="ruleForm.Url" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确定
                </el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog v-model="UpddialogFormVisible" title="编辑" width="800">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="父级菜单">
                <el-cascader :options="parent" v-model="ruleForm.ParentId" @change="End" :props="props1" clearable />
            </el-form-item>
            <el-form-item label="菜单名称" prop="MenuName">
                <el-input v-model="ruleForm.MenuName" />
            </el-form-item>
            <el-form-item label="跳转的Url地址" prop="Url">
                <el-input v-model="ruleForm.Url" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="UpdsubmitForm(ruleFormRef)">
                    确定
                </el-button>
                <el-button @click="UpddialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import http from '@/http/axiosHelper';
import moment from 'moment';
import { onMounted, reactive, ref } from 'vue';
import { useCounterStore } from '@/stores/counter';
import { ElMessage, ElMessageBox, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
const store = useCounterStore()

const tableData = ref([])
onMounted(() => {
    ShowMenu()
    ShowParentMenuName()
})
const parent = ref([{
    "Id": "",
    "MenuName": ""
}])
//获取菜单信息
const ShowMenu = () => {
    http.get("/api/Menu/GetMenu").then(res => {
        tableData.value = res.data.Data
    })
}
//级联
const props1 = {
    checkStrictly: true,
}
const End = (value: any) => {
    ruleForm.ParentId = value[value.length - 1]
}
const ShowParentMenuName = () => {
    http.get("/api/Menu/GetParentMenuName").then(res => {
        parent.value = res.data.Data
    })
}
//打开新增弹窗
const dialogFormVisible = ref(false)
//打开编辑弹窗
const UpddialogFormVisible = ref(false)
const ruleForm = reactive({
    "LoginName": store.Account.Name,
    "MenuName": "",
    "Url": "",
    "ParentId": "0"
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    MenuName: [
        { required: true, message: '菜单名称不能为空', trigger: 'blur' },
    ],
    Url: [
        { required: true, message: 'Url地址不能为空', trigger: 'blur' },
    ],
})
const UpdMenu = (row: any) => {
    UpddialogFormVisible.value = true
    Object.assign(ruleForm, row)
}
//新增接口
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            http.post("/api/Menu/CreateMenu", ruleForm).then(res => {
                if (res.data.Code == 200) {
                    ElMessage.success(res.data.Message)
                    ruleForm.MenuName = ""
                    ruleForm.ParentId = ""
                    ruleForm.Url = ""
                    ShowParentMenuName()
                    ShowMenu()
                    dialogFormVisible.value = false
                }
                else {
                    ElMessage.warning(res.data.Message)
                }
            })
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}
//编辑接口
const UpdsubmitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            http.post("/api/Menu/UpdateMenu", ruleForm).then(res => {
                if (res.data.Code == 200) {
                    ElMessage.success(res.data.Message)
                    ShowMenu()
                    ShowParentMenuName()
                    UpddialogFormVisible.value = false
                }
                else {
                    ElMessage.warning(res.data.Message)
                }
            })
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}
//删除接口
const DelMenu = (id: any) => {
    ElMessageBox.confirm(
        '您确定要删除吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(res => {
        http.get("/api/Menu/DelMenu", { params: { Id: id } }).then(res => {
            if (res.data.Code == 200) {
                ElMessage.success(res.data.Message)
                ShowMenu()
            }
            else {
                ElMessageBox.confirm(
                    '是否删除全部?',
                    '警告',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                ).then(res => {
                    http.get("/api/Menu/DelMenu", { params: { Id: id } }).then(res => {
                        if (res.data.Code == 202) {
                            ElMessage.success(res.data.Message)
                            ShowMenu()
                        }
                        else {
                            ElMessage.warning(res.data.Message)
                        }
                    })
                })
            }
        })
    })
}
</script>